<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../static/lib/vue/vue.js"></script>
</head>
<body>
<!--
        初识Vue：
                1.<div id="root">是一个容器，容器中写的不是原始html代码，而是Vue的模板代码。
                2.所谓的模板代码，类似于React中的jsx，是html+js的混合体
                3.{{xxx}},xxx会自动读取data中的xxx属性，xxxx当表达式去解析
    -->
<!--准备好一个容器-->
<div id='root'>
    <h1>Hello,{{school.name.toUpperCase()}}</h1>
    <h1>学校坐落在：{{school.address}}</h1>
    <h1>我学的是：{{school.subject()}}学科</h1>
    <hr/>
    <h1>{{school.name, school.address}}</h1> <!-- 最终展示的是name -->
    <h1>{{school.name && school.address}}</h1> <!-- 最终展示的是address-->
    <h1>{{school.name ? 1 : 2}}</h1> <!-- 最终展示的是1-->
</div>

<script type="text/javascript">
    //创建一个Vue的实例对象,并传入配置对象
    const app = new Vue({
        el: '#root',    //el用于指定当前Vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于jQuery
        data: {      //data是存储数据的地方，为root容器提供数据，值为一个对象，相当与React中的state
            school: {
                name: 'atguigu',
                address: '宏福科技园综合楼',
                subject: () => '前端'
            }
        }
    });

</script>
</body>
</html>